<template>
  <div>
    <h1>$nextTick</h1>
    <h1 ref="msgTest">{{ msg }}</h1>
    <button @click="changeMsg">更改msg的值</button>
    <p>这是msg1</p>
    <h1>{{ msg1 }}</h1>
    <p>这是msg2</p>
    <h1>{{ msg2 }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "咱们班谁没有阳过？",
      msg1: "",
      msg2: "",
    };
  },
  methods: {
    changeMsg() {
      console.log(this.msg);
      this.msg = "程龙和周乐乐没有阳过";
      //   this.msg1 =
      //   没有更新前h1 咱们班谁没有阳过  更新之后程龙和周乐乐没有阳过
      // 获取的值是更新前的值 有延迟
      console.log(this.$refs.msgTest.innerHTML);
      this.msg1 = this.$refs.msgTest.innerHTML;
      //   有时候在需求当中希望获取的是更新后的值
      //  在默认状态下操作DOM获取的是更前的值， $nextTick当中获取的是DOM更新后的值
      this.$nextTick(() => {
        console.log(this.$refs.msgTest.innerHTML);
        this.msg2 = this.$refs.msgTest.innerHTML;
      });
    },
  },
};
</script>

<style lang="less" scoped>
</style>